<!--
 * @Author: guo wei
 * @LastEditors: [guo wei]
 * @LastEditTime: 2024-01-09 17:42:33
 * @Description: 
-->
<template>
  <div style="display: inline-block">
    <div
      v-for="item in formData"
      :key="item"
      style="padding: 0; display: inline-block"
    >
      <TagItem
        @editTagItem="editTagItem"
        @closeTagItem="closeTagItem"
        :item="item"
      ></TagItem>
    </div>
    <el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="ml-1 w-20"
      size="middle"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />

    <el-button
      v-else
      class="button-new-tag ml-1"
      size="middle"
      @click.stop="showInput"
    >
      添加标签
    </el-button>
  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import TagItem from "@/components/EditTag/index";
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  buildingTypeInfoId: {
    type: Number,
    required: false,
  },
  dataLevel: {
    type: Number,
    required: false,
  },
});
const formData = ref([]);
watch(
  () => props.data,
  (newV) => {
    formData.value = newV;
  },
  { immediate: true, deep: true }
);
const inputValue = ref("");

const inputVisible = ref(false);
const InputRef = ref();
const editInputRef = ref();
const emits = defineEmits(["closeTagItem", "addNewTagItem", "editTagItem"]);
const closeTagItem = (tag) => {
  // formData.value.splice(formData.value.indexOf(tag), 1);
  emits("closeTagItem", tag);
};
const editTagItem = (tag) => {
  emits("editTagItem", tag);
};
const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value.input.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    emits("addNewTagItem", {
      buildingTypeInfoId: props.buildingTypeInfoId,
      dataLevel: props.dataLevel,
      name: inputValue.value,
    });
  }
  inputVisible.value = false;
  inputValue.value = "";
};

const handleEdit = (item) => {
  item.isEdit = true;
};
const handleEditInputConfirm = (item) => {
  item.name = item.editValue;
  item.isEdit = false;
};
</script>
<style lang="scss" scoped>
.el-form {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  :deep .el-form-item {
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 0px;
    &:last-child {
      border-bottom: none;
    }
    .el-form-item__label {
      border-right: 1px solid #e4e7ed;
      padding: 20px;
      display: flex;
      height: auto;
      align-items: center;
    }
    .el-form-item__content {
      padding: 20px;
      padding-bottom: 5px;
      > * {
        padding: 0 20px;
      }
      .el-form-item__error {
        top: 42px;
      }
      .el-tag {
        margin-left: 15px;
        margin-bottom: 15px;
        vertical-align: middle;
      }
      .button-new-tag {
        margin-left: 15px;
        margin-bottom: 15px;
      }
      .el-input {
        width: auto;
        display: inline-block;
        margin-left: 15px;
        margin-bottom: 15px;
      }
    }
    .el-input__inner {
      margin-bottom: 0px;
    }
  }
}
.form-wrap {
  padding: 20px;
}
</style>
